<template>
    <!--list-->
    <div class='list'>
        <div v-for='(val,key) in cities'
                :ref='key'>
            <div class='list-title'>{{key}}</div>
            <ul class='list-msg'>
                <li class='list-item'
                    v-for='item in val'
                    :key='item.id'>
                    {{item.name}}
                </li>
            </ul>
        </div>
    </div>
</template>
<script type="text/javascript">
    export default{
        props:['cities']
    }
</script>
<style scoped lang='stylus'>
    @import '~css/common.styl';
    .list-title{
        font-size:.24rem;
        color:#212121;
        padding:.2rem .3rem;
        border-bottom:1px solid #ddd;
    }
    .list-msg{
        position: relative;
        background: #fff;
        overflow: hidden;
    }
    .list-msg:before{
        content: " ";
        position: absolute;
        left:25%;
        width:25%;
        height: 100%;
        border-left:.02rem solid #ddd;
        border-right:.02rem solid #ddd;
    }
    .list-msg:after{
        content: " ";
        position: absolute;
        left:75%;
        width:25%;
        height: 100%;
        border-left:.02rem solid #ddd;
    }
    .list-item{
        width:25%;
        font-size:.28rem;
        text-align: center;
        line-height: .9rem;
        float:left;
        border-bottom:.02rem solid #ddd;
        textOverflow();
    }
</style>